<%--
  Created by IntelliJ IDEA.
  User: xiaodoudou
  Date: 2020/11/20
  Time: 11:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%String path = request.getContextPath();%>
<html>
<head>

    <link rel="stylesheet" href="<%=path%>/static/usercenter/common/css/sapar.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/usercenter/common/css/common.css" />
    <script type="text/javascript" src="<%=path%>/static/usercenter/common/js/jquery.js"></script>
    <script type="text/javascript" src="<%=path%>/static/usercenter/common/js/sapar.js"></script>
    <script type="text/javascript" src="<%=path%>/static/usercenter/common/js/WdatePicker.js"></script>
    <script type="text/javascript" src="<%=path%>/static/web/js/jquery-3.5.1.min.js"></script>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>

<%--    --%>
    <script src="<%=path%>/static/usercenter/js/jquery.min.js" type="text/javascript"></script>
    <link href="<%=path%>/static/usercenter/css/xiniu.css" rel="stylesheet" type="text/css" />

<%--    好看的弹窗--%>
    <link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">
    <script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>

    <title>修改密码</title>
</head>
<body>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>修改密码</h2>
        </div>
        <div class="subfiled-content">
            <form class="saper-form" id="myform" method="post" action="${path}/user/usercenter/changePass/update"  οnsubmit="return checkAll();" target="_black" >
                <div class="kv-item clearfix">
                    <label>用户名：</label>
                    <div class="kv-item-content">
                        <div class="user-name" style="line-height:30px;">${sessionScope.loginUser.name}</div>
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label><span class="impInfo">*</span>原密码：</label>
                    <div class="kv-item-content">
                        <input type="password" id="password" placeholder="原密码">
                    </div>
                    <span></span>
                </div>
                <div class="kv-item clearfix">
                    <label><span class="impInfo">*</span>新密码：</label>
                    <div class="kv-item-content">
                            <div class="ywz_zhuce_xiaoxiaobao">
                                <div class="ywz_zhuce_kuangzi">
                                    <input name="password" style="margin-left: 0px"  placeholder="新密码" type="password" id="tbPassword" class="ywz_zhuce_kuangwenzi1" />
                                </div>
                                <div class="ywz_zhuce_huixian" id='pwdLevel_1'> </div>
                                <div class="ywz_zhuce_huixian" id='pwdLevel_2'> </div>
                                <div class="ywz_zhuce_huixian" id='pwdLevel_3'> </div>
                                <div class="ywz_zhuce_hongxianwenzi"> 弱</div>
                                <div class="ywz_zhuce_hongxianwenzi"> 中</div>
                                <div class="ywz_zhuce_hongxianwenzi"> 强</div>
                            </div>
                            <div class="ywz_zhuce_yongyu1">
                                <span id="checkNewPass" style="color: #898989;margin-left: 20px;"><font style="color: #F00">*</font> 6-16位，由字母（区分大小写）、数字、符号组成</span>
<%--                                <span id="pwd_err" style="color: #f00; display:none;">6-16位，由字母（区分大小写）、数字、符号组成</span>--%>
                            </div>
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label><span class="impInfo">*</span>确认密码：</label>
                    <div class="kv-item-content">
                        <input type="password" id="repass"  placeholder="确认密码">
                        <span id="checkRepass"></span>
                    </div>
                </div>

                <div class="buttons">
                    
                    <input type="button" value="提交"   class="sapar-btn sapar-btn-recom" id="submitt">
                </div>
            </form>
        </div>
    </div>
    <div id="saper-ft"></div>
</div>
</body>




<%--js--%>
<script>
    //验证密码


    $(function () {
        // function checkAll()
        // {
        //     window.opener.parent.location.reload();
        // }
        //失去焦点验证
        $("#password").blur(checkPassword);
        //失去焦点
        $("#tbPassword").blur(checkNewPass);

        $("#repass").blur(checkRepass);

        //表单提交事件
        $("#submitt").click(submit);
        //验证原密码
        function checkPassword() {
            var flag = flag;
            var password = $("#password").val();

            if(password=="")
            {
                flag = false;
                $("#password").parent().next().html("密码不能为空呦~");
                return flag;
            }
            var text = /^\w{5,15}$/;
            var test = text.test(password);
            if(test==false)
            {
                flag = false;
            }
            if(test== true)
            {
                flag = true;
            }
            return flag;
        }



        //验证是否符合正则
        function checkNewPass()
        {
            var newPass = $(tbPassword).val();
            var test = /^\w{5,15}$/;
            var flag = test.test(newPass);
            if(flag)
            {
                $("#checkNewPass").html("√");
                $("#checkNewPass").css("color","green");
                return true;
            }
            else
            {
                $("#checkNewPass").html("请填写5-15位合法字符作为密码");
                $("#checkNewPass").css("color","red");
                return false;
            }
        }



        //验证密码是否一致

        //验证重复输入是否正确
        function checkRepass() {
            var newPass = $(tbPassword).val();
            var repass =  $("#repass").val();
            if(repass==newPass)
            {
                $("#checkRepass").html("");
                return true;
            }
            else
            {
                $("#checkRepass").html("确认密码与新密码不一致");
                $("#checkRepass").css("color","red");
                return false;
            }
        }
        
        
        
        
        function submit() {

            var f1 = checkPassword();
            var f2 = checkNewPass();
            var f3 = checkRepass();
            var oldPass = $("#password").val();
            if(f1&&f2&&f3)
            {
                    $.ajax({
                        url:"${path}/user/usercenter/checkPass",
                        type:"post",
                        async:false,
                        data:{"password":oldPass},
                        success:function(mes) {
                            if (mes == "true") {

                                $("#myform").submit();
                            }
                            if (mes == "false") {
                                swal("密码不正确呦~");
                            }

                        }

                    })//ajax结束

            }
            else{
                swal("请确认下信息是否正确");
            }
        }
    })//函数结束

</script>

<%--密码强度--%>
<script type="text/javascript">

    $('#tbPassword').focus(function () {
        $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
        $('#tbPassword').keyup();
    });

    $('#tbPassword').keyup(function () {
        var __th = $(this);

        if (!__th.val()) {
            $('#pwd_tip').hide();
            $('#pwd_err').show();
            Primary();
            return;
        }
        if (__th.val().length < 6) {
            $('#pwd_tip').hide();
            $('#pwd_err').show();
            Weak();
            return;
        }
        var _r = checkPassword(__th);
        if (_r < 1) {
            $('#pwd_tip').hide();
            $('#pwd_err').show();
            Primary();
            return;
        }

        if (_r > 0 && _r < 2) {
            Weak();
        } else if (_r >= 2 && _r < 4) {
            Medium();
        } else if (_r >= 4) {
            Tough();
        }

        $('#pwd_tip').hide();
        $('#pwd_err').hide();
    });



    function Primary() {
        $('#pwdLevel_1').attr('class', 'ywz_zhuce_huixian');
        $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
        $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
    }

    function Weak() {
        $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
        $('#pwdLevel_2').attr('class', 'ywz_zhuce_huixian');
        $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
    }

    function Medium() {
        $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
        $('#pwdLevel_2').attr('class', 'ywz_zhuce_hongxian2');
        $('#pwdLevel_3').attr('class', 'ywz_zhuce_huixian');
    }

    function Tough() {
        $('#pwdLevel_1').attr('class', 'ywz_zhuce_hongxian');
        $('#pwdLevel_2').attr('class', 'ywz_zhuce_hongxian2');
        $('#pwdLevel_3').attr('class', 'ywz_zhuce_hongxian3');
    }




    function checkPassword(pwdinput) {
        var maths, smalls, bigs, corps, cat, num;
        var str = $(pwdinput).val()
        var len = str.length;

        var cat = /.{16}/g
        if (len == 0) return 1;
        if (len > 16) { $(pwdinput).val(str.match(cat)[0]); }
        cat = /.*[\u4e00-\u9fa5]+.*$/
        if (cat.test(str)) {
            return -1;
        }
        cat = /\d/;
        var maths = cat.test(str);
        cat = /[a-z]/;
        var smalls = cat.test(str);
        cat = /[A-Z]/;
        var bigs = cat.test(str);
        var corps = corpses(pwdinput);
        var num = maths + smalls + bigs + corps;

        if (len < 6) { return 1; }

        if (len >= 6 && len <= 8) {
            if (num == 1) return 1;
            if (num == 2 || num == 3) return 2;
            if (num == 4) return 3;
        }

        if (len > 8 && len <= 11) {
            if (num == 1) return 2;
            if (num == 2) return 3;
            if (num == 3) return 4;
            if (num == 4) return 5;
        }

        if (len > 11) {
            if (num == 1) return 3;
            if (num == 2) return 4;
            if (num > 2) return 5;
        }
    }

    function corpses(pwdinput) {
        var cat = /./g
        var str = $(pwdinput).val();
        var sz = str.match(cat)
        for (var i = 0; i < sz.length; i++) {
            cat = /\d/;
            maths_01 = cat.test(sz[i]);
            cat = /[a-z]/;
            smalls_01 = cat.test(sz[i]);
            cat = /[A-Z]/;
            bigs_01 = cat.test(sz[i]);
            if (!maths_01 && !smalls_01 && !bigs_01) { return true; }
        }
        return false;
    }

</script>

</html>
